<!-- 注册 -->
<template>
  <div class="register-container">
    <h2>用户注册</h2>
    <input v-model="phone" placeholder="请输入手机号" class="input-field">
    <input type="password" v-model="password" placeholder="设置登录密码" class="input-field">
    <button @click="handleRegister" class="register-btn">立即注册</button>
    <p class="login-link">已有账号？<router-link to="/login">立即登录</router-link></p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from '@/stores'
import { register } from '@/api/Auth/register' // 引入注册接口
import { ElMessage } from 'element-plus' // 可选：用于提示信息


const router = useRouter()
const store = useStore()
const phone = ref('')
const password = ref('')
const handleRegister = async () => {
  if (!phone.value || !password.value) {
    ElMessage.warning('请填写手机号和密码')
    return
  }

  try {
    const response = await register({
      phone: phone.value,
      password: password.value
    })

    if (response.code === 200) {
      ElMessage.success('注册成功')
      router.push('/login') // 注册成功跳转到登录页
    } else {
      ElMessage.error(response.message || '注册失败')
    }
  } catch (error) {
    ElMessage.error(error.response?.data?.message || '网络错误，请重试')
  }
}
</script>

<style scoped>
.register-container {
  max-width: 400px;
  margin: 100px auto;
  padding: 30px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

.input-field {
  display: block;
  width: 100%;
  padding: 12px 15px;
  margin: 15px 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
  transition: border-color 0.3s;
}

.input-field:focus {
  border-color: #4CAF50;
  outline: none;
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
}

.register-btn {
  width: 100%;
  padding: 12px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  margin-top: 10px;
  transition: background-color 0.3s;
}

.register-btn:hover {
  background-color: #45a049;
}

.login-link {
  text-align: center;
  margin-top: 20px;
  color: #666;
}

.login-link a {
  color: #4CAF50;
  text-decoration: none;
}

.login-link a:hover {
  text-decoration: underline;
}
</style>